<link rel="import" href="../../core-layout/core-layout.html">
<link rel="import" href="../../core-icons/core-icons.html">
<link rel="import" href="../../core-icon-button/core-icon-button.html">
<link rel="import" href="../../core-toolbar/core-toolbar.html">
<link rel="import" href="../../core-header-panel/core-header-panel.html">
<link rel="import" href="../../marked-element/marked-element.html">
<link rel="import" href="../../prettify-element/prettify-import.html">
<link rel="import" href="../../context-free-parser/context-free-parser.html">

<!--

Displays formatted source documentation scraped from input urls.

@element core-doc-page
-->

<polymer-element name="core-doc-page" attributes="data">

<!--

Set url to add documentation from that location to the view.

@attribute url
@type String
-->

  <template>

    <link rel="stylesheet" href="core-doc-page.css">

    <core-header-panel id="panel" mode="waterfall">

      <!--<core-toolbar>
        <span style="margin: 0 72px;">{{data.name}}</span>
      </core-toolbar>-->

      <div class="main" on-marked-js-highlight="{{hilight}}">

        <h1 style="font-size: 52px; color: #E91E63;">
          {{data.name}}
        </h1>

        <p>
          <core-icon icon="home"></core-icon>&nbsp;<a href="{{data | homepageFilter}}">Home Page</a>
        </p>

        <template if="{{data.extends}}">
          <section class="box">
            <div class="ntitle">Extends</div>
            <p><a href="#{{data.extends}}">{{data.extends}}</a></p>
          </section>
        </template>

        <template if="{{data.description}}">
          <section class="box top">
            <div class="ntitle">Summary</div>
            <marked-element text="{{data.description}}"></marked-element>
          </section>
        </template>

        <template if="{{data.attributes.length}}">
          <section class="box attribute-box">
            <div class="ntitle" style="background-color: #FFAB40; color: white;">Attributes</div>
            <template repeat="{{data.attributes}}">
              <div class="details">
                <div class="details-name">
                  <p><code>{{name}}</code></p>
                </div>
                <div class="details-info">
                  <p><code>{{type}}</code></p>
                  <marked-element text="{{description}}"></marked-element>
                </div>
              </div>
            </template>
          </section>
        </template>

        <template if="{{data.properties.length}}">
          <section class="box property-box">
            <div class="ntitle" style="background-color: #4285F4; color: white;">Properties</div>
            <template repeat="{{data.properties}}">
              <div class="details">
                <div class="details-name">
                  <p><code>{{name}}</code></p>
                </div>
                <div class="details-info">
                  <p><code>{{type}}</code></p>
                  <marked-element text="{{description}}"></marked-element>
                </div>
              </div>
            </template>
          </section>
        </template>

        <template if="{{data.events.length}}">
          <section class="box event-box">
            <div class="ntitle" style="color: white;">Events</div>
            <template repeat="{{data.events}}">
              <div class="details">
                <div class="details-name">
                  <p><code>{{name}}</code></p>
                </div>
                <div class="details-info">
                  <marked-element text="{{description}}"></marked-element>
                </div>
              </div>
            </template>
          </section>
        </template>

        <template if="{{data.methods.length}}">
          <section class="box method-box">
            <div class="ntitle" style="color: white;">Methods</div>
            <template repeat="{{data.methods}}">
              <div class="details">
                <div class="details-name">
                  <p><code>{{name}}</code></p>
                </div>
                <div class="details-info">
                  <marked-element text="{{description}}"></marked-element>
                </div>
              </div>
            </template>
          </section>
        </template>

      </div>

    </core-header-panel>

  </template>

  <script>

    Polymer('core-doc-page', {

      hilight: function(event, detail, sender) {
        detail.code = prettyPrintOne((detail.code || '').replace(/</g,'&lt;').replace(/>/g,'&gt;'));
      },

      homepageFilter: function(data) {
        if (!data) {
          return '';
        }
        if (!data.homepage || data.homepage === 'github.io') {
          return '//polymer.github.io/' + data.name;
        } else {
          return data.homepage;
        }
      }

    });

  </script>

</polymer-element>